<template>
  <div>
    <van-nav-bar
      fixed
      placeholder
      safe-area-inset-top
      title="经纪人缴纳保证金"
      left-arrow
      @click-left="back"
    />
    <div class="card">
      <div class="words">*该优惠截至2022年6月30日</div>
      <div class="menber">
        <div>
          <div>
            <span class="tiptitle">服务质量保证金</span>
            <span class="newpri">￥<span>1000</span></span>
          </div>
          <div>
            <span class="can">可在服务前再行支付</span>
          </div>
          <div>
            <span class="can">提前支付抢单机会更多</span>
          </div>
        </div>
        <van-checkbox checked-color="#45b7cb" v-model="checkedpri" />
      </div>
    </div>
    <div class="cell">
      <div class="fbox">发票</div>
      <div style="flex: 1"></div>
      <div class="sbox">
        <a style="color: #333" href="tel:4000007173"
          >发票问题请咨询客服<van-icon name="arrow"
        /></a>
      </div>
    </div>
    <!-- <div class="cell">
      <div class="fbox">发票</div>
      <div style="flex: 1"></div>
      <div class="sbox">
        <div v-show="!showemail" @click="addemail">不需要开发票</div>
        <div v-show="showemail">需要开发票</div>
        <div v-show="showemail">个人电子发票接收邮箱: {{ email }}</div>
      </div>
      <van-icon style="margin-left: 10px" name="arrow" />
    </div>
    <div v-show="showemail" style="padding-bottom: 200px" class="cell">
      <div class="fbox">发票税<span>（含发票税）</span></div>
      <div style="flex: 1"></div>
      <div class="sbox">36.90</div>
    </div> -->
    <div class="cut"></div>
    <div class="btnpart">
      <div class="money">
        应付金额:<span>￥{{ checkedpri ? 1000 : 0 }}</span>
      </div>
      <div class="cheak">
        <van-checkbox
          icon-size="14px"
          checked-color="#45b7cb"
          v-model="checked"
          style="margin-right: 5px"
          shape="square"
        ></van-checkbox>
        <span
          >我已阅读并同意<span @click="toagentagreement" class="xy"
            >《经纪人会员服务协议》</span
          ></span
        >
      </div>
      <button @click="pay">缴纳保证金</button>
      <div class="safe"></div>
    </div>
    <!-- <van-dialog
      v-model="showaddemail"
      title="请填写邮箱地址"
      show-cancel-button
      @confirm="confirm"
    >
      <div class="famemail">
        <span>邮箱</span><input type="email" v-model="email" />
      </div>
    </van-dialog> -->
  </div>
</template>

<script>
import { getPay, createPayorder, paySign } from "../../apis/buy.js";
export default {
  data() {
    return {
      checked: false,
      checkedpri: false,
    };
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    // addemail() {
    //   this.showaddemail = true;
    // },
    // confirm() {
    //   this.showemail = true;
    // },
    pay() {
      let _this = this;
      if (_this.checked) {
        if (_this.checkedpri) {
          createPayorder({ serveId: 10,order_type:1 }).then((res) => {
            if (res.code == 201) {
              let orderid = res.result.orderId;
              paySign({ type: "1", orderId: orderid }).then((rep) => {
                console.log(rep);
                if (rep.code == 201) {
                  plus.payment.request(
                    _this.wxChannel,
                    JSON.stringify(rep.result),
                    function (result) {
                      console.log(JSON.stringify("plus:", result));
                      _this.$toast.success("支付成功");
                      _this.$router.push({ path: "/home/me" });
                    },
                    function () {
                      _this.$toast("支付失败");
                    }
                  );
                } else {
                  _this.$toast("下单失败");
                }
              });
            } else {
              _this.$toast("下单失败");
            }
          });
        } else {
        _this.$toast("应付金额不能为0");
        }
      } else {
        _this.$toast("请阅读并勾选下方协议");
      }
    },
    plusReady() {
      let _this = this;
      plus.payment.getChannels((channels) => {
        for (let i in channels) {
          if (channels[i].id == "wxpay") {
            _this.wxChannel = channels[i];
          }
        }
      });
    },
    toagentagreement() {
      this.$router.push({ path: "/agentagreement" });
    },
  },
  created() {
    if (window.plus) {
      setTimeout(this.plusReady, 0);
    } else {
      document.addEventListener("plusready", this.plusReady, false);
    }
  },
};
</script>

<style lang="less" scoped>
.card {
  margin: 0 15px;
  background-color: #f2fafb;
  padding: 15px 10px;
  .menber {
    font-size: 12px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 10px;
    border-radius: 10px;
    .tiptitle {
      display: inline-block;
      font-size: 16px;
      font-weight: bold;
      color: #333;
      margin-bottom: 5px;
    }
    .oldpri {
      text-decoration: line-through;
      font-size: 12px;
      display: inline-block;
      background-color: #f2f2f2;
      color: #999;
      margin-left: 10px;
      padding: 1px 3px;
    }
    .newpri {
      font-size: 12px;
      color: #d43b33;
      margin-left: 10px;
      padding: 1px 5px;
      span {
        font-size: 18px;
        font-weight: bold;
      }
    }
    .point {
      color: #d43b33;
      margin-right: 2px;
    }
    .can {
      color: #999;
      margin-right: 4px;
    }
    .threepart {
      display: flex;
      justify-content: space-between;
      > span {
        margin: 0;
      }
    }
  }
}
.words {
  font-size: 12px;
  color: #d43b33;
  margin-bottom: 10px;
}
.cell {
  margin: 0 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 0;
  border-bottom: 1px solid #f1f1f1;
  .fbox {
    font-size: 18px;
    font-weight: bold;
    span {
      margin-left: 10px;
      font-size: 13px;
      color: #999;
      font-weight: normal;
    }
  }
  .sbox {
    text-align: right;
    font-size: 13px;
  }
}
.famemail {
  text-align: center;
  margin: 15px 0;
  span {
    margin-right: 10px;
  }
  input {
    border: none;
    background-color: #f1f1f1;
    color: #ccc;
    padding: 8px 20px;
    border-radius: 10px;
  }
}
.cut {
  height: 172px;
}
.btnpart {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  z-index: 100;
  padding: 10px 0;
  background-color: #fff;
  text-align: center;
  .money {
    text-align: right;
    margin: 0 15px;
    padding-bottom: 20px;
    color: #333;
    font-weight: bold;
    span {
      color: #d43b33;
      font-size: 20px;
    }
  }
  .cheak {
    border-bottom: 1px solid #f1f1f1;
    padding-bottom: 5px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 15px;
    font-size: 11px;
    color: #333;

    .xy {
      color: #45b7cb;
    }
  }
  button {
    margin-top: 10px;
    border: none;
    border-radius: 20px;
    height: 40px;
    width: 90%;
    color: #fff;
    background-image: linear-gradient(to bottom right, #6fccdd, #49b9cd);
  }
  .safe {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
}
</style>
